<template>
  <div class="stock-out">
    <el-card>
      <div slot="header" class="clearfix">
        <span>出库管理</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleAdd">新增出库</el-button>
      </div>

      <!-- 搜索栏 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="出库单号">
          <el-input v-model="searchForm.orderNo" placeholder="请输入出库单号"></el-input>
        </el-form-item>
        <el-form-item label="出库时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="出库状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="待出库" value="pending"></el-option>
            <el-option label="已出库" value="completed"></el-option>
            <el-option label="已取消" value="cancelled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 出库记录表格 -->
      <el-table :data="stockOutList" style="width: 100%" border>
        <el-table-column prop="orderNo" label="出库单号" width="180"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="type" label="出库类型" width="120">
          <template slot-scope="scope">
            <el-tag>{{ getTypeText(scope.row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="总金额" width="120">
          <template slot-scope="scope">
            ¥{{ scope.row.totalAmount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作人" width="120"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button>
            <el-button 
              v-if="scope.row.status === 'pending'"
              size="mini" 
              type="text" 
              @click="handleComplete(scope.row)">完成出库</el-button>
            <el-button 
              v-if="scope.row.status === 'pending'"
              size="mini" 
              type="text" 
              @click="handleCancel(scope.row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 新增/编辑出库对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px">
      <el-form :model="stockOutForm" :rules="rules" ref="stockOutForm" label-width="100px">
        <el-form-item label="出库类型" prop="type">
          <el-select v-model="stockOutForm.type" placeholder="请选择出库类型">
            <el-option label="销售出库" value="sale"></el-option>
            <el-option label="报损出库" value="damage"></el-option>
            <el-option label="其他出库" value="other"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出库商品">
          <el-table :data="stockOutForm.items" border>
            <el-table-column label="商品名称" width="200">
              <template slot-scope="scope">
                <el-select v-model="scope.row.productId" placeholder="请选择商品">
                  <el-option label="可口可乐" value="1"></el-option>
                  <el-option label="康师傅方便面" value="2"></el-option>
                  <el-option label="农夫山泉" value="3"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="库存数量" width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.stock }}</span>
              </template>
            </el-table-column>
            <el-table-column label="出库数量" width="150">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.quantity" :min="1" :max="scope.row.stock"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="单价" width="150">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.price" :precision="2" :step="0.1" :min="0"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="小计" width="150">
              <template slot-scope="scope">
                ¥{{ (scope.row.quantity * scope.row.price).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" @click="handleRemoveItem(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 10px;">
            <el-button type="text" @click="handleAddItem">添加商品</el-button>
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="stockOutForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 出库详情对话框 -->
    <el-dialog title="出库详情" :visible.sync="detailVisible" width="800px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="出库单号">{{ currentOrder.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ currentOrder.createTime }}</el-descriptions-item>
        <el-descriptions-item label="出库类型">
          <el-tag>{{ getTypeText(currentOrder.type) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(currentOrder.status)">
            {{ getStatusText(currentOrder.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="操作人">{{ currentOrder.operator }}</el-descriptions-item>
        <el-descriptions-item label="总金额">¥{{ currentOrder.totalAmount?.toFixed(2) }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ currentOrder.remark }}</el-descriptions-item>
      </el-descriptions>

      <el-table :data="currentOrder.items" style="width: 100%; margin-top: 20px;" border>
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
        <el-table-column prop="price" label="单价" width="120">
          <template slot-scope="scope">
            ¥{{ scope.row.price.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="subtotal" label="小计" width="120">
          <template slot-scope="scope">
            ¥{{ scope.row.subtotal.toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'StockOutView',
  data() {
    return {
      searchForm: {
        orderNo: '',
        dateRange: [],
        status: ''
      },
      stockOutList: [
        {
          orderNo: 'CK202403030001',
          createTime: '2024-03-03 10:00:00',
          type: 'sale',
          totalAmount: 1500.00,
          status: 'pending',
          operator: '张三',
          remark: '销售出库',
          items: [
            {
              productName: '可口可乐',
              quantity: 100,
              price: 3.00,
              subtotal: 300.00
            },
            {
              productName: '康师傅方便面',
              quantity: 50,
              price: 4.50,
              subtotal: 225.00
            }
          ]
        }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 100,
      dialogVisible: false,
      dialogType: 'add',
      dialogTitle: '新增出库',
      stockOutForm: {
        type: '',
        items: [],
        remark: ''
      },
      rules: {
        type: [
          { required: true, message: '请选择出库类型', trigger: 'change' }
        ]
      },
      detailVisible: false,
      currentOrder: {}
    }
  },
  methods: {
    getTypeText(type) {
      const texts = {
        sale: '销售出库',
        damage: '报损出库',
        other: '其他出库'
      }
      return texts[type] || '未知'
    },
    getStatusType(status) {
      const types = {
        pending: 'warning',
        completed: 'success',
        cancelled: 'info'
      }
      return types[status] || 'info'
    },
    getStatusText(status) {
      const texts = {
        pending: '待出库',
        completed: '已出库',
        cancelled: '已取消'
      }
      return texts[status] || '未知'
    },
    handleSearch() {
      // TODO: 实现搜索逻辑
      console.log('搜索条件：', this.searchForm)
    },
    resetSearch() {
      this.searchForm = {
        orderNo: '',
        dateRange: [],
        status: ''
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      // TODO: 重新加载数据
    },
    handleCurrentChange(val) {
      this.currentPage = val
      // TODO: 重新加载数据
    },
    handleAdd() {
      this.dialogType = 'add'
      this.dialogTitle = '新增出库'
      this.stockOutForm = {
        type: '',
        items: [],
        remark: ''
      }
      this.dialogVisible = true
    },
    handleDetail(row) {
      this.currentOrder = row
      this.detailVisible = true
    },
    handleComplete() {
      this.$confirm('确认完成出库吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 实现完成出库逻辑
        this.$message.success('出库完成')
      }).catch(() => {})
    },
    handleCancel() {
      this.$confirm('确认取消出库吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 实现取消出库逻辑
        this.$message.success('已取消出库')
      }).catch(() => {})
    },
    handleAddItem() {
      this.stockOutForm.items.push({
        productId: '',
        stock: 0,
        quantity: 1,
        price: 0
      })
    },
    handleRemoveItem(index) {
      this.stockOutForm.items.splice(index, 1)
    },
    handleSubmit() {
      this.$refs.stockOutForm.validate((valid) => {
        if (valid) {
          // TODO: 实现提交逻辑
          this.dialogVisible = false
          this.$message.success('保存成功')
        }
      })
    }
  }
}
</script>

<style scoped>
.stock-out {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style> 